<template>
    <n-drawer :show="active" :width="width" :mask-closable="false" @update:show="(flag:boolean) => (active = flag)">
        <n-drawer-content :native-scrollbar="false" title="品牌设置" closable>
            <n-space vertical :size="12">
                <n-table :single-line="false">
                    <thead>
                        <tr>
                            <th>品牌</th>
                            <th>设置</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="brand in brands">
                            <td>{{ brand.name }}</td>
                            <td>
                                <n-switch :default-value="brand.show" @update:value="(val:boolean) => {execSet(brand.id, val)}">
                                    <template #checked>显示</template>
                                    <template #unchecked>隐藏</template>
                                </n-switch>
                            </td>
                        </tr>
                    </tbody>
                </n-table>
            </n-space>
            <template #footer>
                <n-space justify="end">
                    <n-button type="tertiary" @click="() => (active = false)">
                        <template #icon>
                            <n-icon :component="CloseRound" />
                        </template>
                        关闭
                    </n-button>
                </n-space>
            </template>
        </n-drawer-content>
    </n-drawer>
</template>

<script lang="ts" setup>
import { computed, onMounted, ref } from 'vue'
import { CloseRound } from '@vicons/material'

import { Http } from '@/libs'
import { useStore } from '@/store'
const store = useStore()
const width = computed(() => Math.max(store.state.browser.innerWidth * 0.4, 640))

const { $notification: notification } = window

const prop = defineProps({
    show: {
        type: Boolean,
        required: true,
    },
})

const emit = defineEmits(['update:show', 'refresh'])

const active = computed({
    get: () => prop.show,
    set: val => emit('update:show', val),
})

const brands = ref<any>([])
const execLoad = () => {
    Http.post('/ops/sys/car/model/brand', {
        show: false,
        root: true,
    }).then(resp => {
        if (resp.stat.err > 0) {
            return
        }
        brands.value = resp.data.items
    })
}

const execSet = (id: string, show: boolean) => {
    console.log(id, show)
    Http.post('/ops/sys/car/model/show/set', {
        bid: id,
        show: show,
    }).then(resp => {
        if (resp.stat.err > 0) {
            return
        }
        notification.success({
            duration: 1500,
            title: '操作成功',
            content: '您已成功设置品牌显示状态',
        })
        emit('refresh', {})
    })
}

onMounted(() => {
    execLoad()
})
</script>
